<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图效果</title>
</head>
<body>
<!--
实现功能:
1.存在多张图,但是之后显示其中一个
2.可以点击上一个,下一个进行切换
3.可以定时自动切换
-->
    <div id="app">
        <div>
            <img :src="imgList[currentIndex].src" width="200px" height="200px" />
        </div>

        <button @click="preImg">上一张</button>
        <button @click="nextImg">下一张</button>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            imgList: [
                {id: 1, src: "../imgs/1.jpg"},
                {id: 2, src: "../imgs/2.jpeg"},
                {id: 3, src: "../imgs/3.jpg"},
            ],
            currentIndex: 0
        },
        created: function(){
            setInterval(() => {
                this.nextImg()
            }, 2000);
        },
        methods: {
            preImg (){
                if (this.currentIndex === 0) {
                    this.currentIndex = this.imgList.length - 1
                }else {
                    this.currentIndex--
                }
            },
            nextImg(){
                if (this.currentIndex === this.imgList.length - 1) {
                    this.currentIndex = 0
                } else {
                    this.currentIndex++
                }

            }
        }
    })
</script>
</html>